<template>
  <div class="sample-tutorial">
    <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
      <!--   表单默认绑定   -->
      <gc-worksheet>
      </gc-worksheet>
      <!--   表单自定义绑定   -->
      <gc-worksheet>
      </gc-worksheet>
      <!--   单元格绑定   -->
      <gc-worksheet>
        <gc-column :width="100"></gc-column>
        <gc-column :width="120"></gc-column>
        <gc-column :width="160"></gc-column>
      </gc-worksheet>
      <gc-worksheet>
      </gc-worksheet>
    </gc-spread-sheets>
  </div>
</template>

<script setup>
//数据源绑定
import '@grapecity-software/spread-sheets-vue';
import '@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import {ref} from "vue";
import GC from "@grapecity-software/spread-sheets";
import '@grapecity-software/spread-sheets-resources-zh';

class Product {
  constructor(id, line, color, name, price, cost, weight, discontinued, rating) {
    this.id = id;
    this.line = line;
    this.color = color;
    this.name = name;
    this.price = price;
    this.cost = cost;
    this.weight = weight;
    this.discontinued = discontinued;
    this.rating = rating;
  }
}

class Company {
  constructor(name, logo, slogan, address, city, phone, email) {
    this.name = name;
    this.logo = logo;
    this.slogan = slogan;
    this.address = address;
    this.city = city;
    this.phone = phone;
    this.email = email;
  }
}

class Customer {
  constructor(id, name, company) {
    this.id = id;
    this.name = name;
    this.company = company;
  }
}

class Record {
  constructor(description, quantity, amount) {
    this.description = description;
    this.quantity = quantity;
    this.amount = amount;
  }
}

class Invoice {
  constructor(company, number, date, customer, receiverCustomer, records) {
    this.company = company;
    this.number = number;
    this.date = date;
    this.customer = customer;
    this.receiverCustomer = receiverCustomer;
    this.records = records;
  }
}

class BindingPathCellType extends GC.Spread.Sheets.CellTypes.Text {
  constructor() {
    super();
  }

  paint(ctx, value, x, y, w, h, style, context) {
    if (value === null || value === undefined) {
      let sheet = context.sheet,
          row = context.row,
          col = context.col;
      if (sheet && (row === 0 || !!row) && (col === 0 || !!col)) {
        let bindingPath = sheet.getBindingPath(context.row, context.col);
        if (bindingPath) {
          value = "[" + bindingPath + "]";
        }
      }
    }
    super.paint(ctx, value, x, y, w, h, style, context);
  }
}

GC.Spread.Common.CultureManager.culture("zh-cn");

const spreadRef = ref(null);

const getProducts = (count) => {
  const _lines = ["Computers", "Washers", "Stoves"];
  const _colors = ["Red", "Green", "Blue", "White"];
  const _ratings = ["Terrible", "Bad", "Average", "Good", "Great", "Epic"];
  const dataList = [];
  for (let i = 1; i <= count; i++) {
    const line = _lines[Math.floor(Math.random() * 3)];
    dataList[i - 1] = new Product(i,
        line,
        _colors[Math.floor(Math.random() * 4)],
        line + " " + line.charAt(0) + i,
        Math.floor(Math.random() * 5001) / 10.0 + 500,
        Math.floor(Math.random() * 6001) / 10.0,
        Math.floor(Math.random() * 10001) / 100.0,
        (Math.random() > 0.5),
        _ratings[Math.floor(Math.random() * 6)]);
  }
  return dataList;
};
let initSpread = function (spread) {
  spreadRef.value = spread;
  spread.suspendPaint();// 暂停绘制
  spread.options.tabStripRatio = 1.8;

  const products = getProducts(100);

  const sheet = spread.getSheet(0);
  sheet.name("默认绑定");
  sheet.setDataSource(products);

  const sheet2 = spread.getSheet(1);
  sheet2.name("自定义绑定");
  sheet2.autoGenerateColumns = false;
  sheet2.setDataSource(products);
  const colInfos = [
    {name: "id", displayName: "ID"},
    {name: "name", displayName: "Name", size: 100},
    {name: "line", displayName: "Line", size: 80},
    {name: "color", displayName: "Color"},
    {name: "price", displayName: "Price", formatter: "0.00", size: 80},
    {name: "cost", displayName: "Cost", formatter: "0.00", size: 80},
    {name: "weight", displayName: "Weight", formatter: "0.00", size: 80},
    {name: "discontinued", displayName: "Discontinued", cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 100},
    {name: "rating", displayName: "Rating"}
  ];
  sheet2.bindColumns(colInfos);

  const sheet3 = spread.getSheet(2);
  sheet3.name("单元格绑定");
  let person = {
    name: "John",
    age: 25,
    address: {
      street: "123 Main St",
      city: "Anytown",
      state: "CA",
      zip: "12345"
    }
  }
  sheet3.setValue(0, 0, "hello world")
  sheet3.setValue(2, 1, 'name')
  sheet3.setValue(2, 2, person.name)
  // sheet3.setDataSource(person);
  // 创建单元格级别绑定的数据源
  let source = new GC.Spread.Sheets.Bindings.CellBindingSource(person)
  sheet3.setBindingPath(2, 2, "name");
  sheet3.setBindingPath(3, 2, "age");
  sheet3.setBindingPath(4, 2, "address.city");
  sheet3.setDataSource(source);
  sheet3.getRange(0, 0, 1, 2).backColor("yellow")
  // 选中的单元格变化
  sheet3.bind(GC.Spread.Sheets.Events.SelectionChanged, function (event, data) {
    console.log('SelectionChange', data, event)
  })
  // 单元格数值变化，只有回车或者离开单元格才会触发
  sheet3.bind(GC.Spread.Sheets.Events.CellChanged, function (event, data) {
    console.log('CellChange', data, event)
  })

  let company1 = new Company("Baidu", null, "We know everything!", "Beijing 1st road", "Beijing", "010-12345678", "baidu@baidu.com"),
      company2 = new Company("TeCent", null, "We have everything!", "Shenzhen 2st road", "Shenzhen", "0755-12345678", "tecent@qq.com"),
      company3 = new Company("Alibaba", null, "We sale everything!", "Hangzhou 3rd road", "Hangzhou", "0571-12345678", "alibaba@alibaba.com"),
      customer1 = new Customer("A1", "employee 1", company2),
      customer2 = new Customer("A2", "employee 2", company3),
      records1 = [new Record("Finance charge on overdue balance at 1.5%", 1, 150), new Record("Invoice #100 for $1000 on 2014/1/1", 1, 150)],
      records2 = [new Record("Purchase server device", 2, 15000), new Record("Company travel", 100, 1500), new Record("Company Dinner", 100, 200)],
      invoice1 = new Invoice(company1, "00001", new Date(2014, 0, 1), customer1, customer1, records1),
      invoice2 = new Invoice(company2, "00002", new Date(2014, 6, 6), customer2, customer2, records2);
  const datsSource1 = new GC.Spread.Sheets.Bindings.CellBindingSource(invoice1)
  const sheet4 = spread.getSheet(3);
  sheet4.name("表格数据绑定");
  let bindingPathCellType = new BindingPathCellType();
  sheet4.getCell(1, 2).bindingPath("company.slogan").cellType(bindingPathCellType).vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
  sheet4.getCell(1, 4).value("INVOICE").foreColor("#58B6C0").font("33px Arial");
  sheet4.getCell(3, 1).bindingPath("company.name").cellType(bindingPathCellType).foreColor("#58B6C0").font("bold 20px Arial");
  sheet4.getCell(5, 1).bindingPath("company.address").cellType(bindingPathCellType);
  sheet4.getCell(5, 3).value("INVOICE NO.").font("bold 15px Arial");
  sheet4.getCell(5, 4).bindingPath("number").cellType(bindingPathCellType);
  sheet4.getCell(6, 1).bindingPath("company.city").cellType(bindingPathCellType);
  sheet4.getCell(6, 3).value("DATE").font("bold 15px Arial");
  sheet4.getCell(6, 4).bindingPath("date").cellType(bindingPathCellType).formatter("MM/dd/yyyy").hAlign(GC.Spread.Sheets.HorizontalAlign.left);
  sheet4.getCell(7, 1).bindingPath("company.phone").cellType(bindingPathCellType);
  sheet4.getCell(7, 3).value("CUSTOMER ID").font("bold 15px Arial");
  sheet4.getCell(7, 4).bindingPath("customer.id").cellType(bindingPathCellType);
  sheet4.getCell(8, 1).bindingPath("company.email").cellType(bindingPathCellType);
  sheet4.getCell(10, 1).value("TO").font("bold 15px Arial");
  sheet4.getCell(10, 3).value("SHIP TO").font("bold 15px Arial");
  sheet4.getCell(11, 1).bindingPath("customer.name").cellType(bindingPathCellType).textIndent(10);
  sheet4.getCell(12, 1).bindingPath("customer.company.name").cellType(bindingPathCellType).textIndent(10);
  sheet4.getCell(13, 1).bindingPath("customer.company.address").cellType(bindingPathCellType).textIndent(10);
  sheet4.getCell(14, 1).bindingPath("customer.company.city").cellType(bindingPathCellType).textIndent(10);
  sheet4.getCell(15, 1).bindingPath("customer.company.phone").cellType(bindingPathCellType).textIndent(10);
  sheet4.getCell(11, 4).bindingPath("receiverCustomer.name").cellType(bindingPathCellType);
  sheet4.getCell(12, 4).bindingPath("receiverCustomer.company.name").cellType(bindingPathCellType);
  sheet4.getCell(13, 4).bindingPath("receiverCustomer.company.address").cellType(bindingPathCellType);
  sheet4.getCell(14, 4).bindingPath("receiverCustomer.company.city").cellType(bindingPathCellType);
  sheet4.getCell(15, 4).bindingPath("receiverCustomer.company.phone").cellType(bindingPathCellType);
  sheet4.addSpan(17, 1, 1, 2);
  sheet4.getCell(17, 1).value("JOB").foreColor("#58B6C0").font("bold 12px Arial");
  sheet4.addSpan(17, 3, 1, 2);
  sheet4.getCell(17, 3).value("PAYMENT TERMS").foreColor("#58B6C0").font("bold 12px Arial");
  sheet4.addSpan(18, 1, 1, 2);
  sheet4.getCell(18, 1).backColor("#DDF0F2");
  sheet4.addSpan(18, 3, 1, 2);
  sheet4.getCell(18, 3).value("Due on receipt").backColor("#DDF0F2").foreColor("#58B6C0").font("12px Arial");
  sheet4.getRange(17, 1, 2, 4).setBorder(new GC.Spread.Sheets.LineBorder("#58B6C0", GC.Spread.Sheets.LineStyle.thin), {
    top: true,
    bottom: true,
    innerHorizontal: true
  });

  let table = sheet4.tables.add("tableRecordds", 20, 1, 4, 4, GC.Spread.Sheets.Tables.TableThemes.light6);
  table.autoGenerateColumns(false);
  let tableColumn1 = new GC.Spread.Sheets.Tables.TableColumn();
  tableColumn1.name("DESCRIPTION");
  tableColumn1.dataField("description");
  let tableColumn2 = new GC.Spread.Sheets.Tables.TableColumn();
  tableColumn2.name("QUANTITY");
  tableColumn2.dataField("quantity");
  let tableColumn3 = new GC.Spread.Sheets.Tables.TableColumn();
  tableColumn3.name("AMOUNT");
  tableColumn3.dataField("amount");
  table.bindColumns([tableColumn1, tableColumn2, tableColumn3]);
  table.bindingPath("records");
  table.showFooter(true);
  table.setColumnName(3, "TOTAL");
  table.setColumnValue(2, "TOTAL DUE");
  table.setColumnDataFormula(3, "=[@QUANTITY]*[@AMOUNT]");
  table.setColumnFormula(3, "=SUBTOTAL(109,[TOTAL])");
  sheet.getCell(26, 1).formula('="Make all checks payable to "&B4&". THANK YOU FOR YOUR BUSINESS!"').foreColor("gray").font("italic 14px Arial");
  sheet.options.allowCellOverflow = true;
  //Adjust row height and column width
  sheet4.setColumnWidth(0, 5);
  sheet4.setColumnWidth(1, 300);
  sheet4.setColumnWidth(2, 115);
  sheet4.setColumnWidth(3, 125);
  sheet4.setColumnWidth(4, 155);
  sheet4.setRowHeight(0, 5);
  sheet4.setRowHeight(1, 40);
  sheet4.setRowHeight(2, 10);
  sheet4.setRowHeight(3, 28);
  sheet4.setRowHeight(17, 0);
  sheet4.setRowHeight(18, 0);
  sheet4.setRowHeight(19, 0);
  sheet4.setRowHeight(25, 10);
  sheet4.options.gridline = {
    showHorizontalGridline: false,
    showVerticalGridline: false
  };
  const range = sheet4.getRange(20, 1, 2, 2);
  const filter = new GC.Spread.Sheets.Filter.HideRowFilter(range);
  sheet4.rowFilter(filter)
  sheet4.setDataSource(datsSource1)

  spread.resumePaint();// 恢复绘制,repaint重绘
};


</script>
<style scoped>
.sample-tutorial {
  width: 1200px;
  height: 680px;
}

.sample-spreadsheets {
  height: 100%;
  width: 100%;
}
</style>